<template>
	<div class="favorite-mv">
	  <el-divider content-position="left">
		<h2>我收藏的视频和 MV({{ mvcount }})</h2>
	  </el-divider>
	  <VideoList :videolist="favoriteMv" />
	  <div v-if="favoriteMv.length === 0">
		<el-empty description="还没有收藏的视频" :image-size="200" />
	  </div>
	</div>
  </template>
  
  <script setup>
  import { computed, reactive } from 'vue';
  import { getSubMv } from '@/network/myfavorite/myfavorite';
  import VideoList from '@/components/content/videolist/VideoList.vue';
  import { useStore } from 'vuex';
  
  const store = useStore();
  const state = store.state;
  const subMvlist = computed(() => state.subMvlist);
  
  const data = reactive({
	favoriteMv: [],
	mvcount: 0,
  });
  
  const getSubMvBy = async () => {
	const res = await getSubMv();
	data.favoriteMv = res.data.data;
	data.mvcount = res.data.count;
	store.dispatch('saveFavoriteMv', res.data.data);
  };
  
  if (subMvlist.value.length === 0) {
	getSubMvBy();
  } else {
	data.favoriteMv = subMvlist.value;
	data.mvcount = subMvlist.value.length;
  }
  </script>
  
  <style lang="less" scoped></style>